import dash
from dash import html, dcc
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd


# 数据源
df = pd.DataFrame(
    {
        "x": [1, 2, 3, 4, 5],
        "add10": [11, 12, 13, 14, 15],
        "multiply2": [2, 4, 6, 8, 10],
        "square2": [1, 4, 9, 16, 25],
    }
)


# 创建Dash应用
app = dash.Dash(__name__)

# 定义布局
app.layout = html.Div(
    [
        html.H1("选择显示的数据"),
        dcc.RadioItems(
            id="id_radio_cal_mode",
            options=[
                {"label": "加10", "value": "add10"},
                {"label": "乘2", "value": "multiply2"},
                {"label": "平方", "value": "square2"},
            ],
            value="add10",
        ),
        dcc.Graph(
            id="id_cal_value",
        ),
    ]
)


# 定义回调函数
@app.callback(Output("id_cal_value", "figure"), Input("id_radio_cal_mode", "value"))
def update_mode(select_cal_mode):
    print("回调函数被调用，选择的模式是：", select_cal_mode)
    # plotly express绘制折线图
    fig = px.line(df, x="x", y=select_cal_mode, title="复选框折线图")
    return fig


if __name__ == "__main__":
    app.run(debug=True, port=8090)
